<template>
  <!--检查数据条目容器-->
  <div class="data-item-container">
    <!--标题按钮容器-->
    <div class="title-button-pot data-item-container-children">
      <!--左侧标题容器-->
      <div class="title-box">
        <!--标题-->
        <span>{{ checkData.inspectName }}</span>
        <!--状态-->
        <el-tag size="mini" :type="getType()">
          <i class="el-icon-time"></i>
          {{ checkData.inspectStateName }}
        </el-tag>
      </div>
      <!--右侧按钮容器-->
      <div class="button-box">
        <el-row>
          <el-button @click="submitEvent(item.handelCode)" :type="item.type" size="mini" :key="index" plain
                     v-for="(item,index) of buttonData">
            <i :class="item.icon"></i>
            {{ item.label }}
          </el-button>

        </el-row>
      </div>
    </div>
    <!--时间组织容器-->
    <div class="time-organization-pot data-item-container-children">
      <span>计划完成时间：{{ checkData.planCompleteTime }}</span>
      <span>归属组织：{{ checkData.belongOrgName }}</span>
    </div>
    <!--数据容器-->
    <div class="data-pot data-item-container-children" v-if="checkData.inspectState != CHECK_STATE.DRAFT">
      <dict-check v-hasRole="{role: ['business:inspect:s_scope'], logical: LOGICAL.AND}" :dict-data="typeList"
                  v-model="currentType"></dict-check>
      <!--数据容器-->
      <div class="data-box">
        <div class="num-item">
          <div class="label">隐患统计（总数/自查/抽查/督查）：</div>
          <div class="value">
            {{
              `(${numData.questionCount}/${numData.selfCheckQuestionCount}/${numData.randomSelfQuestionCount}/${numData.randomAllQuestionCount})`
            }}
          </div>
        </div>

        <div class="num-item">
          <div class="label">整改情况（未整改/整改中/待确认/已整改）：</div>
          <div class="value">{{
              `(${numData.noRectificationQuestionCount}/${numData.rectificationQuestionCount}/${numData.waitConfirmCount}/${numData.completedQuestionCount})`
            }}
          </div>
        </div>

        <div class="num-item" v-if="numData.showWaitCheckQuestionCount == '1'">
          <div class="label">待复核隐患数：</div>
          <div :class="numData.waitCheckQuestionCount > 0 ? ['value','imp'] : ['value']">
            {{ `(${numData.waitCheckQuestionCount})` }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getCheckEventBtList} from "@/views/checkPage/config/eventConfig";
import {CHECK_STATE} from "@/constantData";
import DictCheck from "@/components/DictCheck/index.vue";

export default {
  components: {
    DictCheck,
  },
  props: {
    checkData: {
      type: Object
    }
  },
  data: function () {
    return {
      CHECK_STATE,
      currentType: '1',
      typeList: [
        {
          label: '行政监管',
          value: '1'
        },
        {
          label: '直属监管',
          value: '2'
        },
      ],
      //按钮容器中按钮所用
      buttonData: getCheckEventBtList(this.checkData),
      //数据内容器中数据所用
      dataList: [
        {itemName: '企业数量', itemData: this.checkData.enterpriseCount},
        {itemName: '总隐患数量', itemData: this.checkData.questionCount},
        {itemName: '整改完成隐患数量', itemData: this.checkData.completedQuestionCount},
        {itemName: '整改中隐患数量', itemData: this.checkData.rectificationQuestionCount},
        {itemName: '未整改隐患数量', itemData: this.checkData.noRectificationQuestionCount},
        {itemName: '抽查企业数量', itemData: this.checkData.randomSelfEnterpriseCount},
        {itemName: '督察企业数量', itemData: this.checkData.randomAllEnterpriseCount},
        {itemName: '待复核隐患数量', itemData: this.checkData.waitCheckQuestionCount},
      ],
      //三角形下拉列表是否显示
      //showFlag: false,
    }
  },
  computed: {
    numData() {
      let {currentType, checkData: {allInspectStatisticVo, selfInspectStatisticVo}} = this;
      return currentType == '1' ? allInspectStatisticVo : selfInspectStatisticVo
    }
  },
  methods: {
    getType() {
      let {checkData: {inspectState}} = this;
      inspectState = inspectState.toString()
      let type = ''
      switch (inspectState) {
        case CHECK_STATE.DRAFT:
          type = 'warning'
          break;
        case CHECK_STATE.UNDERWAY:
          type = 'success'
          break;
        case CHECK_STATE.HAVE_BEEN_FILED:
          type = ''
          break;
      }
      return type
    },
    // changeShowFlag() {
    //   // this.showFlag = !this.showFlag;
    // },
    submitEvent(handelCode) {
      let item = this.buttonData.find(cItem => cItem.handelCode == handelCode)
      this.$emit('submitEvent', item, this.checkData)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

// 设置检查数据条目容器样式
.data-item-container {
  //设置宽高
  width: 100%;
  //background: #BBFFAA;
  border-bottom: 1px solid rgba(220, 223, 230, 1); //设置下边框
  //设置子元素共有样式
  .data-item-container-children {
    //设置子元素统一宽度
    width: 100%;
    //设置容器间间距
    margin-bottom: 10px;
    //子无素都设为弹性容器
    display: flex;
    align-items: center; //内部弹性元素垂直居中
  }

  //设置标题按钮容器样式
  .title-button-pot {
    height: 30px;
    //background: pink; //仅用于布局查看
    //设置子容器位置
    justify-content: space-between; //空白留在中间
    // 设置左侧标题容器样式
    .title-box {
      span {
        font-size: $second-font-size;
        //设置与右侧状态间距
        margin-right: 25px;
        font-weight: 700;
      }

      //设置状态样式
      ::v-deep .el-tag {
        padding-top: 3px;
        padding-bottom: 3px;
        height: max-content;
        border-radius: 10px; //给状态设置圆角
        font-size: $thirdly-font-size;
      }
    }

    // 设置右侧按钮容器样式
    .button-box {
      //设置内部按钮位置
      display: flex;
      //设置从右侧开始排列
      justify-content: flex-end;
    }
  }

  //设置时间组织容器样式
  .time-organization-pot {
    padding-top: 10px; //设置文本偏下
    //background: yellow; //仅用于布局查看
    //设置字体样式
    font-size: $thirdly-font-size;
    color: rgba(144, 147, 153, 1);
    //设置两个文本间距离
    span {
      margin-right: 25px;
    }
  }

  // 设置数据容器样式
  .data-pot {
    width: 100%;
    display: flex;
    height: 30px;
    align-items: center;

    ::v-deep .dict-check-root {
      width: max-content;
      height: 100%;
      margin-right: 30px;
    }

    // 设置数据容器样式
    .data-box {
      display: flex;
      align-items: center;
      height: 100%;

      .num-item {
        display: flex;
        margin-right: 30px;

        .label, .value {
          font-size: $thirdly-font-size;
        }

        .label {
          color: rgb(144, 147, 153);
        }

        .value {
          color: rgb(32, 125, 255);

          &.imp {
            color: red;
          }
        }
      }
    }
  }
}

</style>
